<template>
  <el-dialog
    title="详情"
    :close-on-click-modal="false"
    :visible.sync="visible"
    width="70%">
    <xkl-form ref="xklForm" :data-form="dataForm" :data-form-config="dataFormConfig">
      <!--元素将插入至slot指定字段之后，参考模板：<template slot="carrierCode"><el-col></el-col></template>-->
    </xkl-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="visible = false">取消</el-button>
    </span>
  </el-dialog>
</template>

<script>
  export default {
    components: {},
    data () {
      return {
        visible: false,
        roleList: [],
        clickFlag: true,
        dataForm: {
          id: 0,
          test1: '',
          test2: '',
          test3: '',
          test4: '',
          test5: ''
        },
        dataFormConfig: {
          /** baseConfig 用于配置表单基本结构，
           ...其余参数满足以下下规则：
           字段名称: {
             label: 字段label名称,
             span: 自定义span大小，默认为baseConfig中的span值
             isDict: 是否为字典下拉框，如果是传入字典类型dictType
             isStatic: 下拉框的值是否为前端写死，如果是请在config配置中加入dataList ==> config{
                dataList: [
                  {label: '', value: ''}, {label: '', value: ''}
                ]
             }
             isLink：是否为非字典下拉框，config: {
               type: 'INFO'设置为INFO时下拉框以label方式显示,
               keyType: '接收的key值',
               labelType: '接收的label值'，
               link：'下拉框接口地址'
             }
           }
           列表排列顺序为字段排列顺序 */
          baseConfig: {span: 8, labelWidth: 100},
          test1: {label: '测试1'},
          test2: {label: '测试2'},
          test3: {label: '测试3'},
          test4: {label: '测试4'},
          test5: {label: '测试5'}
        }
      }
    },
    watch: {
    },
    methods: {
      init (id) {
        this.dataForm.id = id || 0
        this.visible = true
        this.$nextTick(() => {
          if (this.dataForm.id) {
            this.$http({
              url: this.$http.adornUrl('/sys/role/select'),
              method: 'get',
              params: this.$http.adornParams()
            }).then(({data}) => {
              if (data && data.code === 0) {
                Object.keys(this.dataForm).forEach(item => {
                  if (item !== 'id') this.dataForm[item] = data.testList[item]
                })
                this.changeData(data.testList)
              }
            })
          }
        })
      },
      changeData () {
        // 自定义数据展现形式
      }
    }
  }
</script>

